<template>
  <view class="beat-visualizer">
    <view class="beat-container">
      <view 
        v-for="(beat, index) in beats" 
        :key="index" 
        class="beat-indicator" 
        :class="{ 
          'active': currentBeat === index, 
          'accent': index === 0,
          'custom-color': customColor
        }"
        :style="getIndicatorStyle(index)"
      >
        <text class="beat-number" :class="{ 'active-text': currentBeat === index }">
          {{ index + 1 }}
        </text>
      </view>
    </view>
    
    <view class="time-signature">
      {{ timeSignature }}
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

// 属性定义
const props = defineProps({
  // 当前拍号
  timeSignature: {
    type: String,
    default: '4/4'
  },
  // 当前节拍位置（从0开始）
  currentBeat: {
    type: Number,
    default: -1
  },
  // 自定义颜色（主题色）
  accentColor: {
    type: String,
    default: ''
  }
});

// 计算属性
const beats = computed(() => {
  // 解析拍号
  const [beatsPerMeasure] = props.timeSignature.split('/');
  return new Array(parseInt(beatsPerMeasure)).fill(0);
});

const customColor = computed(() => {
  return props.accentColor && props.accentColor !== '';
});

// 获取指示器样式
function getIndicatorStyle(index) {
  const style = {};
  
  if (customColor.value) {
    // 设置活动状态的背景色和阴影
    if (props.currentBeat === index) {
      style.backgroundColor = props.accentColor;
      style.boxShadow = `0 6px 12px ${props.accentColor}40`;
    } else {
      // 设置基础样式
      style.backgroundColor = index === 0 ? '#f7f7f7' : '#f2f2f2';
    }
  }
  
  return style;
}

// 辅助函数：调整颜色深浅
function adjustColor(color, percent) {
  // 去掉可能存在的#前缀
  let hex = color.replace(/^#/, '');
  
  // 解析RGB值
  let r, g, b;
  if (hex.length === 3) {
    r = parseInt(hex[0] + hex[0], 16);
    g = parseInt(hex[1] + hex[1], 16);
    b = parseInt(hex[2] + hex[2], 16);
  } else {
    r = parseInt(hex.substring(0, 2), 16);
    g = parseInt(hex.substring(2, 4), 16);
    b = parseInt(hex.substring(4, 6), 16);
  }
  
  // 调整亮度
  r = Math.max(0, Math.min(255, r + percent));
  g = Math.max(0, Math.min(255, g + percent));
  b = Math.max(0, Math.min(255, b + percent));
  
  // 转回HEX格式
  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
}
</script>

<style>
.beat-visualizer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30rpx 0;
}

.beat-container {
  display: flex;
  justify-content: center;
  margin: 30rpx 0;
  width: 100%;
  gap: 15rpx;
  padding: 0 30rpx;
}

.beat-indicator {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  background-color: #f2f2f2;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.beat-indicator:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
  z-index: 0;
}

.beat-number {
  font-size: 38rpx;
  font-weight: bold;
  color: #666;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.beat-number.active-text {
  color: white;
  font-size: 42rpx;
  font-weight: bold;
}

.beat-indicator.active {
  background-color: #007AFF;
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 122, 255, 0.25);
  z-index: 1;
}

.beat-indicator.accent {
  background-color: #f7f7f7;
}

.beat-indicator.custom-color.active {
  transform: scale(1.05);
}

.time-signature {
  font-size: 28rpx;
  color: #999;
  margin-top: 15rpx;
}
</style> 